<!--
 * @Descripttion: 自定义导航栏公共组件
 * @version: 1.0.0
 * @Author: sueRimn
 * @Date: 2025-11-08
-->
<template>
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: bgColor }">
        <view class="navbar-content" :style="{ height: navHeight + 'px' }">
            <!-- 左侧区域 -->
            <view class="navbar-left" @click="handleLeftClick">
                <slot name="left">
                    <uni-icons 
                        v-if="showBack" 
                        type="back" 
                        :size="iconSize" 
                        :color="iconColor"
                    ></uni-icons>
                </slot>
            </view>

            <!-- 标题区域 -->
            <view class="navbar-title" :style="{ color: titleColor, fontSize: titleSize + 'rpx' }">
                <slot name="title">{{ title }}</slot>
            </view>

            <!-- 右侧区域 -->
            <view class="navbar-right" @click="handleRightClick">
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'CustomNavbar',
    props: {
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 是否显示返回按钮
        showBack: {
            type: Boolean,
            default: true
        },
        // 背景颜色
        bgColor: {
            type: String,
            default: '#fff'
        },
        // 标题颜色
        titleColor: {
            type: String,
            default: '#333'
        },
        // 标题字体大小
        titleSize: {
            type: Number,
            default: 36
        },
        // 图标颜色
        iconColor: {
            type: String,
            default: '#333'
        },
        // 图标大小
        iconSize: {
            type: Number,
            default: 24
        },
        // 导航栏内容高度
        navHeight: {
            type: Number,
            default: 44
        },
        // 是否显示底部边框
        showBorder: {
            type: Boolean,
            default: true
        },
        // 返回时的默认页面（当无历史记录时）
        defaultBackUrl: {
            type: String,
            default: '/pages/index/index'
        }
    },
    computed: {
        statusBarHeight() {
            return uni.getSystemInfoSync().statusBarHeight || 0;
        }
    },
    methods: {
        // 左侧点击事件
        handleLeftClick() {
            // 如果有自定义左侧插槽内容，触发自定义事件
            if (this.$slots.left) {
                this.$emit('left-click');
                return;
            }

            // 默认返回逻辑
            if (this.showBack) {
                const pages = getCurrentPages();
                if (pages.length > 1) {
                    uni.navigateBack();
                } else {
                    // 判断默认页面是否为 tabBar 页面
                    if (this.defaultBackUrl.includes('/pages/index/') || 
                        this.defaultBackUrl.includes('/pages/user/')) {
                        uni.switchTab({ url: this.defaultBackUrl });
                    } else {
                        uni.redirectTo({ url: this.defaultBackUrl });
                    }
                }
            }
        },
        // 右侧点击事件
        handleRightClick() {
            this.$emit('right-click');
        }
    }
}
</script>

<style lang="scss" scoped>
.custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;

    .navbar-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16rpx;

        .navbar-left {
            width: 80rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .navbar-title {
            flex: 1;
            text-align: center;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .navbar-right {
            width: 80rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }

    // 底部边框
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background-color: #f0f0f0;
        transform: scaleY(0.5);
    }
}

// 无边框样式
.custom-navbar.no-border::after {
    display: none;
}
</style>
